import 'braft-editor/dist/index.css'
import BraftEditor, { EditorState } from 'braft-editor'
import { useState } from 'react'
type BraftProps = {}

export const Braft = (props: BraftProps) => {
  const [editorState, setEditirState] = useState<EditorState>(BraftEditor.createEditorState('<div></div>'))
  const handleChange = (editorState: EditorState) => {
    console.log(editorState)
    setEditirState(editorState)
  }
  return (
    <>
      <h1>富文本编辑器</h1>
      <BraftEditor
      style={{ width: '100%', height: 400 }}
        value={editorState}
        onChange={handleChange}
      />
      <hr />
      {
        // 将此数据 存放于数据库
        editorState.toHTML()
      }
      <div>预览</div>
      {/* 从数据库提取出来以此种方法渲染 */}
      <div dangerouslySetInnerHTML={{ __html: editorState.toHTML() }}></div>
    </>
  );
}